<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>更新时的问题</title>
</head>
<body>
    <div id="root">
        <!-- 
        Vue监视数据的原理
        1.Vue会监视data中所有层次的数据
        2.如何检测对象中的数据?
            通过setter实现监视，且要在new Vue是就传入要检测的数据
            1).对象中后追加的属性，Vue默认不做响应式处理
            2).如需给后添加的属性做响应式，请使用如下API:
            Vue.set(target,peopertyName/index,value)或
            vm.$set(target,peopertyName/index,value)
        3.如何检测数组中的数据
            通过包裹数组更新元素的方法实现，本质就是做了两件事
            1).调用原生对应的方法对数组进行更新
            2).重新解析模板，进而更新页面
        4.在Vue修改数组中的某个元素一定要用如下方法
            1).使用这些API:push(),pop(),shift(),unshift(),splice(),sort(),reverse()
            2).使用Vue.set()或vm.$set()方法修改数组中的某个元素
        特别注意：Vue.set()或vm.$set()方法不能给vm或vm的跟对象添加属性
        -->
        <button @click="student.age++">年龄+1岁</button>
        <br>
        <button @click="addSex">添加性别属性，默认值:男</button>
        <br>
        <button @click="student.gender='女'">添加性别属性</button>
        <br>
        <button @click="addFriend">在列表首位添加一个朋友</button>
        <br>
        <button @click="student.friends[0].name='张三'">修改第一个朋友的名字:张三</button>
        <br>
        <button @click="student.hobby.push('开车')">添加一个爱好</button>
        <br>
        <button @click="updateStudentFirstHobby">修改第一个爱好为:开车</button>
        <br>
        <button @click="filterStudentHobby">过滤爱好中的抽烟</button>

        <h1>学生姓名:{{student.name}}</h1>
        <h1>学生年龄:{{student.age}}</h1>
        <h1 v-if="student.gender">学生性别:{{student.gender}}</h1>
        <h1>学生爱好:</h1>
        <ul>
            <li v-for="(item, index) in student.hobby">{{item}}</li>
        </ul>
        <h1>学生朋友:</h1>
        <ul>
            <li v-for="(item, index) in student.friends">{{item.name}}-{{item.age}}</li>
        </ul>
    </div>
</body>
<script>
    //计算属性实现
    var vm = new Vue({
        el: '#root',
        data: {
            student:{
                name: "张三",
                age: 20,
                hobby:['抽烟', '喝酒', '烫头'],
                friends:[
                    {
                        name:"tony",
                        age:"18"
                    },
                    {
                        name:"jerry",
                        age:"19"
                    }
                ]
            }
        },
        methods:{
            addSex: function(){
                // Vue.set(this.student, "gender", "男");
                this.$set(this.student, "gender", "男");
            },
            addFriend: function(){
                this.student.friends.unshift({
                    name:"张三",
                    age: 21
                });
            },
            updateStudentFirstHobby: function(){  
                this.student.hobby.splice(0, 1, "开车");  
                // Vue.set(this.student.hobby, 0, "开车");
                // this.$set(this.student.hobby, 0, "开车");
            },
            filterStudentHobby: function(){
                this.student.hobby = this.student.hobby.filter(function(item){
                    return item !== "抽烟";
                });
            }
        }
    })      
</script>
</html>